<template>
  <customizeDialog
    title="选择检查项目"
    :visible="visible"
    width="1000px"
    top="40px"
    @update:visible="visible = $event"
  >
    <div class="table-wrap">
      <div class="search_header">
        <div></div>
        <div class="search_header_right">
          <el-input
            placeholder="请输入项目名称、项目编号、建设单位、施工单位"
            v-model="parameter.keywords"
            @keydown.enter.native="search"
            clearable
          >
            <span
              @click="search"
              slot="suffix"
              style="display: inline-block"
            >
              <Icon
                title="搜索"
                name="sousuo"
                color="#A7ADB5"
                font-size="20"
              />
            </span>
          </el-input>
        </div>
      </div>
      <el-table
        :data="projectList"
        :header-cell-style="{
          background: '#F2F6FB ',
          color: ' #6B767D'
        }"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        @row-click="handleSelectionChange"
      >
        <el-table-column align="center" width="55" label="">
          <template slot-scope="scope">
            <el-radio
              class="radio"
              v-model="selectRow"
              :label="scope.row.pkid"
              >&nbsp;</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          align="center"
          show-overflow-tooltip
          width="80"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="项目编号"
          prop="projectNo"
          show-overflow-tooltip
        />
        <el-table-column
          label="项目名称"
          prop="projectName"
          show-overflow-tooltip
        />
        <el-table-column
          label="标段名称"
          prop="sectionName"
          show-overflow-tooltip
        />
        <el-table-column
          label="建设单位"
          prop="buildUnit"
          show-overflow-tooltip
        />
        <el-table-column
          label="施工单位"
          prop="sgdw"
          show-overflow-tooltip
        />
        <el-table-column
          label="监理单位"
          prop="watchUnit"
          show-overflow-tooltip
        />
      </el-table>
      <div class="table-pagination" v-if="total">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="parameter.pageSize"
          @current-change="pageChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <template slot="footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSumbit"
        >确 定</el-button
      >
    </template>
  </customizeDialog>
</template>

<script>
import { queryReportProjectList } from '@/api/reportManagement'
import customizeDialog from '@/components/checkHistory/customizeDialog'
import Icon from '@/components/icon'
export default {
  name: 'prtrolProjectAdd',
  components: { Icon, customizeDialog },
  data() {
    return {
      loading: false,
      visible: false,
      projectList: [],
      total: 0,
      parameter: {
        keywords: '',
        pageIndex: 1,
        pageSize: 8
      },
      selectRow: '',
      reportType: 1
    }
  },
  async created() {},
  methods: {
    show() {
      this.visible = true
      this.parameter.pageIndex = 1
      this.getList()
    },
    search() {
      this.parameter.pageIndex = 1
      this.getList()
    },
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },
    getList() {
      this.loading = true
      queryReportProjectList(this.parameter).then((res) => {
        if (res.success) {
          this.total = res.data.count
          this.projectList = res.data.list
        }
        this.loading = false
      })
    },
    // 表格高亮
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },
    handleSelectionChange(row) {
      this.selectRow = row.pkid
    },
    handleCancel() {
      this.visible = false
    },
    handleSumbit() {
      if (!this.selectRow) {
        this.$message.warning('请选择检测项目')
        return
      }

      const find = this.projectList.find((item) => {
        return item.pkid === this.selectRow
      })
      this.$router.push({
        path: '/wisdomConstruction/reportManagement/form',
        query: {
          dataStr: JSON.stringify({
            projectId: find.pkid,
            projectName: find.projectName,
            sectionName: find.sectionName,
            buildUnit: find.buildUnit,
            watchUnit: find.watchUnit,
            workUnit: find.sgdw
          }),
          type: 'edit',
          title: '新增'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/table.scss';
.table-wrap {
  width: 100%;
  height: 500px;
  padding: 0;
}
.cancel {
  width: 80px;
  height: 34px;
  border: 1px solid #497fa3;
  font-size: 14px;
  font-weight: 400;
  color: #497fa3;
}
.sumbit {
  width: 80px;
  height: 34px;
  background: #497fa3;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
</style>
